<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, watch } from "vue";
import uniqBy from "lodash/uniqBy";
import goodsIcon from "./goodsIcon.vue";
import { onReady, onShow} from "@dcloudio/uni-app";
import { router } from "@/utils/tools";
import { onReachBottom } from "@dcloudio/uni-app";
import { apiMyList } from "@/apis/my";
import goodsCard from "./goodsCard.vue";

const myGoodCard = true
const pageNum = ref(1);
const pageSize = ref(10);
const oldleftList:any = ref([])
const oldrightList:any = ref([])
const leftList:any = ref([]);
const rightLists:any = ref([]);
const isMore = ref(false);

const props = defineProps({
  tagFlag: {
    type: Number,
    default: 0,
  },
  searchText: {
    type: String,
    default: "",
  },
});
watch(
  () => props.tagFlag,
  (newValue, oldValue) => {
    //console.log("tagFlag 变化了：", newValue);
    oldleftList.value = [];
    oldrightList.value = [];
    leftList.value = [];
    rightLists.value = [];
    pageNum.value = 1;
    pageSize.value = 10;
    isMore.value = false;
    getProductPage();
  }
);
watch(
  () => props.searchText,
  (newValue, oldValue) => {
    oldleftList.value = [];
    oldrightList.value = [];
    leftList.value = [];
    rightLists.value = [];
    pageNum.value = 1;
    pageSize.value = 10;
    isMore.value = false;
    getProductPage();
  }
);
const handleDetail = (row: any) => {
  router(`/pagesMerchand/stone-details?id=${row.id}&type=${"my"}`);
};

const getProductPage = async () => {
  const isAuthentication = props.tagFlag === 1;
  let res = await apiMyList({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    title: props.searchText, //模糊查询奇石标题
    state: isAuthentication ? "" : props.tagFlag || "", //2-在售  3-已售 4-下架  5-我的收藏
    authentication: isAuthentication ? 1 : "", //认证
    // orderField: 'default',
    // orderType: 'desc'
  });
  const total = res.total
  handlePageList(res.rows, total);
};
const handlePageList = (data: any, total:any) => {
  for (let i = 0; i < data.length; i++) {
    // data[i].images = data[i].images.split(",");
    if(data[i]?.images){
      data[i].images = data[i]?.images.split(",")
    }
    if(data[i]?.videos){
      data[i].videos = data[i]?.videos.split(",")
    }
    if (i % 2 === 0) {
      // leftList.value.push(data[i]);
      oldleftList.value.push(data[i])
    } else {
      // rightLists.value.push(data[i]);
      oldrightList.value.push(data[i])
    }
  }
  let newarrleft = [...leftList.value, ...oldleftList.value]
  let newrightList = [...rightLists.value, ...oldrightList.value]
  const uniqueLeft = [...new Set(newarrleft.map(JSON.stringify))].map(JSON.parse);
  const uniqueRight = [...new Set(newrightList.map(JSON.stringify))].map(JSON.parse);
  leftList.value = uniqueLeft
  rightLists.value = uniqueRight
  isMore.value = (leftList.value.length + rightLists.value.length) < total

};
onReachBottom((e: any) => {
  //console.log("触底触底触底------");
  if (isMore.value) {
    pageNum.value++;
    getProductPage();
  }
});
onLoad((options: any) => {
});
onShow(async () => {
  oldleftList.value = [];
  oldrightList.value = [];
  leftList.value = [];
  rightLists.value = [];
  pageNum.value = 1;
  pageSize.value = 10;
  isMore.value = false;
  getProductPage();
});
onReady(() => {
  
});
</script>

<template>
  <view>
    <view class="wf flex">
      <view class="wf-left flex flex-1 flex-column">
        <!-- 瀑布流左边 -->
        <view
          v-for="(item, i) in uniqBy(leftList, 'id')"
          :key="i"
          @click="handleDetail(item)"
        >
          <goodsCard :goodsData="item" :myGoodCard="myGoodCard"> </goodsCard>
        </view>
      </view>
      <view class="flex wf-center"></view>

      <view class="wf-right flex flex-1 flex-column">
        <view
          v-for="(item, i) in uniqBy(rightLists, 'id')"
          :key="i"
          @click="handleDetail(item)"
          class=""
        >
          <goodsCard :goodsData="item" :myGoodCard="myGoodCard"> </goodsCard>
        </view>
      </view>
      <!--  -->
    </view>
    <uv-empty
      mode="list"
      v-if="leftList.length <= 0 && rightLists.length <= 0"
    ></uv-empty>
    <block v-if="leftList.length > 0 || rightLists.length > 0">
      <uv-load-more
        status="nomore"
        fontSize="12px"
        nomoreText="人家也是有底线哒"
        :line="true"
        v-if="!isMore"
      />
    </block>
  </view>
</template>

<style scoped lang="scss">
.wf {
  .wf-center {
    width: 20rpx;
  }

  .wf-left {
    overflow: hidden;
  }

  .wf-right {
    overflow: hidden;
  }
}
</style>
